<div class="box box-solid bg-teal-gradient">
    <div class="box-header">
        <div class="row">
            <?php foreach ($knob as $key => $k): ?>
            <div class="col-xs-1 text-center" style="border-right: 1px solid #f4f4f4">
                <a class="searchType" href="javascript:void(0);" id="{$key}">
                <input type="text" class="knob" data-readonly="true" value="<?=$k['count']?>" data-width="60" data-height="60"
                       data-fgColor="#39CCCC">
                <div class="knob-label">{$lang->get($k['title'])}</div>
                </a>
            </div>
            <?php endforeach;?>

        </div>
    </div>
    <div class="box-body border-radius-none">
        <table id="syslogTable" class="table" data-type=""></table>
    </div>
    <!-- /.box-body -->

</div>
<!-- /.box -->

<script type="text/javascript">
    $(function () {
        $('.knob').knob();

       $("#syslogTable").bootstrapTable({
            url: '{url("/load/")}',
            locale: 'zh-CN',
            sortName: "DeviceReportedTime",
            sortOrder: 'desc',
            striped: true,
            sidePagination: "server",
            height: $(document).height()-220,
            pageSize: 50,
            pageList: [50, 100, 500],
            pagination: true,
            idField: 'ID',
            columns: [{
                field: 'ID',
                title: '{$lang->Severity}',
                visible: false
            }, {
                field: 'Priority',
                title: '{$lang->Severity}',
                clickToSelect: true,
                sortable: true,
                width:40,
                formatter: function (value, row) {
                    var $serverity;
                    switch (value) {
                        case 0:
                            $serverity = "<span class=\"label label-danger\">EMERGENCY</span>";
                            break;
                        case "1" :
                            $serverity = "<span class=\"label label-danger\">{$lang->ALERT}</span>";
                            break;
                        case "2":
                            $serverity = "<span class=\"label label-danger\">{$lang->CRITICAL}</span>";
                            break;
                        case "3":
                            $serverity = "<span class=\"label label-danger\">{$lang->ERROR}</span>";
                            break;
                        case "4":
                            $serverity = "<span class=\"label label-warning\">{$lang->WARNING}</span>";
                            break;
                        case "5":
                            $serverity = "<span class=\"label label-success\">{$lang->NOTICE}</span>";
                            break;
                        case "6":
                            $serverity = "<span class=\"label label-info\">{$lang->INFO}</span>";
                            break;
                        case  "7":
                            $serverity = "<span class=\"label label-primary\">{$lang->DEBUG}</span>";
                            break;
                    }
                    return $serverity;
                }
            }, {
                field: 'Facility',
                title: '{$lang->Facility}',
                clickToSelect: true,
                sortable: true,
                formatter: function (value, row) {
                    switch (value) {
                        case "0":
                            return "KERNEL-MESSAGE";
                                                   case "1":
                            return "USER-MESSAGE";
                        case "2":
                            return "MAIL-SYSTEM";
                        case "3":
                            return "SECURITY-DAEMON";
                        case "4":
                            return "AUTH-MESSAGE";
                        case "5":
                            return "SYSLOGD";
                        case "6":
                            return "PRINTER";
                        case "7":
                            return "NETWORK";
                        case "8":
                            return "UUCP";
                        case "9":
                            return "CRON";
                        case "10": {
                            return "AUTH-MESSAGE-10";
                            break;
                        }
                        case "11": {
                            return "FTP";
                            break;
                        }
                        case "12": {
                            return "NTP";
                            break;
                        }
                        case "13": {
                            return "LOG-AUDIT";
                            break;
                        }
                        case "14": {
                            return "LOG-ALERT";
                            break;
                        }
                        case "15": {
                            return "CLOCK-DAEMON";
                            break;
                        }
                        case "16": {
                            return "LOCAL0";
                            break;
                        }
                        case "17": {
                            return "LOCAL1";
                            break;
                        }
                        case "18": {
                            return "LOCAL2";
                            break;
                        }
                        case "19": {
                            return "LOCAL3";
                            break;
                        }
                        case "20": {
                            return "LOCAL4";
                            break;
                        }
                        case "21": {
                            return "LOCAL5";
                            break;
                        }
                        case "22": {
                            return "LOCAL6";
                            break;
                        }
                        case "23": {
                            return "LOCAL7";
                            break;
                        }
                    }
                }
            }, {
                field: 'DeviceReportedTime',
                title: '{$lang->Date}',
                clickToSelect: true,
                sortable: true
            }, {
                field: 'FromHost',
                title: '{$lang->Host}',
                clickToSelect: true,
                sortable: true
            }, {
                field: 'SysLogTag',
                title: '{$lang->Syslogtag}'
            }, {
                field: 'SmallMessage',
                title: '{$lang->Message}'
            }, {
                field: 'Message',
                title: '{$lang->Message}',
                visible: false
            }]
        });

        $('#syslogTable').on('click-row.bs.table', function (e, row, $element) {
            if ($element.hasClass('expandedMessage') == false) {
                $element.after('<tr><td colspan="6" class="expandedMessage">' + row.Message + '</td></tr>');
                $element.addClass('expandedMessage');
            }
            else {
                // Remove previous created tr + remove class
                $element.closest('tr').next().remove();
                $element.removeClass('expandedMessage');
            }
        });

        $('.searchType').click(function () {
            var $key=$(this).attr('id');
            var server=$('#server .active a').attr('id');
            server=server?server:'';
            $("#syslogTable").data('type',$key).bootstrapTable('refreshOptions',{url:'{url("/search/")}?type='+$key+'&server='+server}).bootstrapTable('refresh');
        });

        $('#search').click(function () {
            var key=$('input[name=searchKey]').val();
            var type=$("#syslogTable").data('type');
            var server=$('#server .active a').attr('id');
            server=server?server:'';
            $("#syslogTable").bootstrapTable('refreshOptions',{url:'{url("/search/")}?type='+type+'&key='+key+'&server='+server}).bootstrapTable('refresh');
        });

        $('input[name=searchKey]').keypress(function (e) {
            if (e.keyCode == 13) {
                var key=$('input[name=searchKey]').val();
                var type=$("#syslogTable").data('type');
                var server=$('#server .active a').attr('id');
                server=server?server:'';
                $("#syslogTable").bootstrapTable('refreshOptions',{url:'{url("/search/")}?type='+type+'&key='+key+'&server='+server}).bootstrapTable('refresh');
                e.preventDefault();
            }
        })

        $('#server li a').click(function () {
            $('#server').find('.active').removeClass('active');
            $(this).parent('li').addClass('active');
            var key=$('input[name=searchKey]').val();
            var type=$("#syslogTable").data('type');
            var server=$(this).attr('id')?$(this).attr('id'):''
            $("#syslogTable").bootstrapTable('refreshOptions',{url:'{url("/search/")}?type='+type+'&key='+key+'&server='+server}).bootstrapTable('refresh');
        });
        function refresh() {
            $("#syslogTable").bootstrapTable('refresh');
            console.log('refresh');
        }

        $('#refreshTable').click(function () {
            refresh();
        });
        setInterval(refresh,30000);

    });
</script>
